<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<body>
<div id="app">

    <table>
        <tr>
            <td>身份证号  <input type="text" id="card" value=""></td>
            <td></td>
            <td></td>
            <td>就诊科室*
                <select id="dep">
                    <option value="">请选择</option>
                    <option v-if="j.department!=null" v-for="(j,index) in users" :value="j.department.id">{{j.department.name}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>就诊医生*
                <select  id="sele">
                    <option value="">请选择</option>
                    <option  v-for="(item,index) in users" v-if="item.id!=1" :value="item.id" >{{item.userName}}</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td>挂号单状态*
                <select  id="zt">
                    <option value="">请选择</option>
                    <option :value="1">已挂号,未问诊</option>
                    <option :value="2">正在问诊</option>
                    <option :value="3">问诊结束</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><button @click="querya()">查询</button></td>
        </tr>
    </table>


<form name="f1" >
    <table border="1" width="80%">
        <tr>
            <td>挂号单编号</td>
            <td>病人姓名</td>
            <td>性别</td>
            <td>身份证号</td>
            <td>就诊科室</td>
            <td>挂号时间</td>
            <td>创建时间</td>
        </tr>
        <tr v-for="(a,index) in queryall">
            <td v-text="a.id"></td>
            <td v-text="a.patient.name"></td>
            <td v-text="a.patient.sex==1?'男':'女'"></td>
            <td v-text="a.patient.idCard"></td>
            <td v-text="a.department.name"></td>
            <td v-text=""></td>
            <td v-text=""></td>
        </tr>
    </table>
    <div >
        <nav aria-label="Page navigation example" class="d-flex justify-content-center">
            <div>

                <ul class="p pagination" style="list-style: none;">
                    <li style="display: inline;"> 当前第<input  v-model="pageInfo.pageNum" style="width: 30px;text-align: center;"/>
                        页/{{pageInfo.pages}}</li>
                    <li class="page-item " :class="{disabled:pageInfo.isFirstPage}" style="display: inline;">
                        <a class="page-link" href="javascript:;"  @click="querya(pageInfo.pageNum-1)" >上一页</a></li>
                    <li v-for="(item,index) in pageInfo.navigatepageNums" class="page-item"
                        :class="{active:item==pageInfo.pageNum}"  style="display: inline;">
                        <a class="page-link" href="javascript:;"
                           @click="querya(item)">{{item}}</a>
                    </li>
                    <li class="page-item" :class="{disabled:pageInfo.isLastPage}"  style="display: inline;"><a class="page-link"
                                                                                                               href="javascript:;"  @click="querya(pageInfo.pageNum+1)">下一页</a></li>
                </ul>
            </div>

        </nav>
    </div>
</form>

</div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                users:[],
                sche:[],
                queryall:[],
                pageNum:1,
                pageSize:1,
                pageInfo:''  //分页信息对象
            },
            methods:{
                querya(num){
                    this.pageNum=num;
                    var card=$("#card").val();
                    var jz=$("#dep option:selected").val();
                    var gh=$("#sele option:selected").val();
                    var zt=$("#zt option:selected").val();
                    $.getJSON({
                        type: "GET",  //提交类型必须与服务器要求的一致
                        url: "reg!queryByLike",   //远程服务器接口的地址请求后端
                        data:{"y.idCard":card,"y.name":jz,
                            "y.userName":gh,"y.status":zt,
                            "pageNum":this.pageNum,"pageSize":this.pageSize},
                        success: function (json) {
                            console.log(JSON.stringify(json));
                            app.pageInfo=json[0];  //获取服务器的分页json对象
                            app.queryall=json[1];  //获得服务器里面的集合
                        }
                    });
                }
                ,
                goto(){

                    $.getJSON({

                        type: "GET",  //提交类型必须与服务器要求的一致
                        url: "user!queryAll",   //远程服务器接口的地址请求后端
                        success: function (json) {
                            app.users=json;  //获得服务器里面的集合
                        }
                    });
                },
                date(){
                    $.getJSON({
                        type: "GET",  //提交类型必须与服务器要求的一致
                        url: "sche!queryByDate",   //远程服务器接口的地址请求后端
                        success: function (json) {
                            app.sche=json;  //获得服务器里面的集合
                        }
                    });
                },

            },mounted(){
                //从服务器拿数据
                this.goto();
                this.querya(1);
                this.date();

            }
        });

    </script>
</body>
</html>
